02. Intro to HTML

Intro to HTML Heading

Intro to HTML

ND001 C01 L01 01 Intro To HTML

Intro to HTML Recap

Welcome to Intro to HTML! First, we’ll dive into HTML, which will structure the elements in our webpage. Next, we’ll move onto CSS, which will help style the webpage. Lastly, we’ll focus more on the layout to make sure everything is distributed how we want.

HTML stands for Hypertext Markup Language. This is the same “Hypertext” included in the “http” you see at the start of URLs in the browser, as it’s part of how browsers will know how to render what you provide. By the end of this lesson, you’ll be able to use HTML to add elements to display within a browser window, just as you would do with a webpage.

HTML is a common starting point for those looking to get into web development. Later in the course, you’ll combine it with CSS, and even later in the Nanodegree, with Javascript, to create a full web experience. HTML itself is very much the basic building block of the web.

ND001 C01 L01 01.1 Intro To HTML Part 2

Intro to HTML Doc Tags

A Few Early HTML Tags

Let’s quickly take a look at some early HTML tags. With HTML, tags help tell the browser how to render different elements on the page, especially once you get into the styling with CSS later, where the tags will point to specific styles to use throughout your webpage. We will just briefly cover these here, as you’ll see more on them when we discuss the DOM.

<!DOCTYPE html>

Nearly every web document using HTML will start with this. This just tells the browser it is rendering an HTML document.

<html> and </html>

The first of these will likely be right after the doctype tag, while the second will “close” this tag, and won’t be present until the end of the HTML document. These note that everything in between is HTML code.

<body> and </body>

The body is where most of the content you will actually see on your webpage goes. It is closed with a </body> tag. Note that in basic examples, it is not actually required, as the page assumes other content is within the body, but by the end of this lesson you should be using this regularly. There is actually a <head> section that can come before the body, but we will skip that for now.

Here is just a very brief example of how these might look in practice, without anything filled into the body yet.

<!DOCTYPE html>
<html>
  <body>
    <!-- Page content would go here -->
  </body>
</html>

We will start seeing all of these in practice soon!